<script setup lang='ts'>
import { ref, reactive,onMounted } from 'vue'
import {
  GetAttendance,
  exportAttendance
} from '@/api/http'
// defineProps({
  
// })

// 分页
const pageInfo = reactive({
  total: 100,
  pageSize: 10,
  pageNum: 1
})

// 参数对象
const searchForm:any = reactive ({
  ELoginTime: '',
  SLogoutTime: '',
  HarborCode: '',
  CompanyCode: ''
})

// 表格数据
const tableData:any = ref([])
onMounted(() => {
  getWorkAttendanceData()
})
// 获取表格数据
const getWorkAttendanceData = async() => {
  tableData.value = []
  console.log('查询数据----->', searchForm )
  let pageData = {
    SkipCount: (pageInfo.pageNum - 1) * pageInfo.pageSize,
    MaxResultCount: pageInfo.pageSize
  }
  // 获取初始化数据
  let res = await GetAttendance({ ...pageData, ...searchForm })
  console.log('查询结果----->', res)
  if(res.success) {
    tableData.value = [ ...res.result.items ]
    tableData.value.forEach(el => {
      el.loginTime = (el.loginTime.split('T')[0] + ' ' + el.loginTime.split('T')[1]).split('.')[0]
      el.logoutTime = el.logoutTime.split('T')[0] + ' ' + el.logoutTime.split('T')[1].split('.')[0]
    })
    pageInfo.total = res.result.totalCount
  }
}

const cellStyle = {
  textAlign: 'center'
}

const headStyle = {
  textAlign: 'center'
}
// 改变每页数量
const handlePlanSizeChange = (val: number) => {
  console.log('查询结果----->', val)
  pageInfo.pageSize = val
  getWorkAttendanceData()
}
// 切换页码
const handlePlanCurrentChange = (val: number) => {
  pageInfo.pageNum = val
  getWorkAttendanceData()
}

// 向外暴露的函数与变量
defineExpose({
  searchForm,
  getWorkAttendanceData
})
</script>

<template>
  <div>
    <el-table
      :cell-style="cellStyle"
      :header-cell-style="headStyle"
      :data="tableData"
      max-height="480"
      size="small"
    >
      <el-table-column
        prop="name"
        label="司机名"
      />
      <el-table-column
        prop="loginTime"
        label="登录时间"
      />
      <el-table-column
        prop="logoutTime"
        label="登出时间"
      />
      <el-table-column
        prop="workingHours"
        label="工作时长"
      />
    </el-table>
    <div class="pagination-box">
      <el-pagination
        v-model:current-page="pageInfo.pageNum"
        v-model:page-size="pageInfo.pageSize"
        :page-sizes="[5, 10, 15, 20]"
        layout="sizes, prev, pager, next,jumper"
        :total="pageInfo.total"
        @size-change="handlePlanSizeChange"
        @current-change="handlePlanCurrentChange"
      />
    </div>
  </div>
</template>

<style scoped lang=scss>
.pagination-box {
  height: 40px;
  margin-top: 10px;
}
</style>